import React from 'react';
import { Form, Table, Drawer, Typography } from 'antd';
import { Icon } from '@/pages/Recruitment/components';
import { FormLayout, Newline } from '../../components';
import Previewer from '../Previewer';
import AccessTable from '../AccessTable';
import AssessTag from './AssessTag';

const map = { weekly: '周', monthly: '月', quarterly: '季' };
export default function AssessAbilityDetail({ data = {}, record = {} }) {
    const [visible, setVisible] = React.useState(false);
    const { assessTable = {}, opinion = '', announcements = '', file = [], period, employeeCode } = data;
    const { assessAbility = {} } = record;
    const { levels = [] } = assessAbility;
    const { content = '"{}"' } = assessTable;
    const { project = [] } = JSON.parse(content);
    const newEmployeeFlag = React.useMemo(() => {
        const currentUser = JSON.parse(localStorage.getItem('user') || null) ?? {};
        return currentUser?.employeeCode === employeeCode;
    }, [employeeCode]);
    const columns = [
        {
            title: '评估人',
            dataIndex: 'assessEmployeeName',
            width: '30%'
        },
        {
            title: '评估表',
            dataIndex: 'projectName'
        },
        {
            title: '分数',
            dataIndex: 'score'
        },
        {
            title: '等级',
            dataIndex: 'level',
            render(text) {
                return <AssessTag title={text} onlyText levels={levels} />;
            }
        },
        {
            title: '操作',
            dataIndex: 'operation',
            align: 'center',
            width: 100,
            render: () => (
                <Icon
                    title="查看详情"
                    type="listfunction_viewinterview_icon_default"
                    onClick={() => {
                        setVisible(true);
                    }}
                />
            )
        }
    ];

    const dataSource = [
        {
            assessEmployeeName: assessTable.assessEmployeeName,
            projectName: assessTable.projectName,
            score: assessTable.score,
            level: assessTable.level
        }
    ];

    return (
        <div>
            <Drawer
                width={800}
                placement="right"
                closable={false}
                onClose={() => {
                    setVisible(false);
                }}
                visible={visible}
                bodyStyle={{ overflow: 'hidden', height: '100%', padding: 0 }}
            >
                <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', height: '100%' }}>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            flex: 1,
                            margin: 24,
                            overflow: 'auto',
                            border: '1px solid #e8e8e8',
                            background: '#fafafa'
                        }}
                    >
                        <div
                            style={{
                                width: '100%',
                                borderBottom: '1px solid #e8e8e8',
                                padding: '10px 16px',
                                background: '#FAFAFA'
                            }}
                        >
                            <Typography.Title level={4} style={{ marginBottom: 0, textAlign: 'center' }}>
                                {assessTable.projectName}
                            </Typography.Title>
                        </div>
                        <div
                            style={{
                                width: '100%',
                                borderBottom: '1px solid #e8e8e8',
                                display: 'flex',
                                padding: '10px 24px'
                            }}
                        >
                            <div style={{ flex: 1 }}>
                                <strong>最终得分：{assessTable.score}</strong>
                            </div>
                            <div style={{ flex: 1 }}>
                                <strong>最终级别：{assessTable.level}</strong>
                            </div>
                        </div>
                        <div style={{ flex: 1, overflow: 'hidden' }}>
                            <AccessTable
                                value={project}
                                readOnly
                                footer={() => <pre>{assessAbility.projectExplain}</pre>}
                            />
                        </div>
                    </div>
                </div>
            </Drawer>
            <div style={{ width: 900 }}>
                <FormLayout type="full">
                    <Form.Item label="评估结果">
                        <AssessTag title={assessTable.level} levels={levels} />
                    </Form.Item>
                </FormLayout>
                <FormLayout type="full">
                    <Form.Item label={`${map[period]}评估表`}>
                        <Table
                            rowKey="assessEmployeeName"
                            columns={columns}
                            dataSource={dataSource}
                            pagination={false}
                            bordered
                        />
                    </Form.Item>
                </FormLayout>
                {opinion && !newEmployeeFlag && (
                    <FormLayout type="full">
                        <Form.Item label="评估意见">
                            <Newline text={opinion} />
                        </Form.Item>
                    </FormLayout>
                )}
                {announcements && (
                    <FormLayout type="full">
                        <Form.Item label="注意事项">
                            <Newline text={announcements} />
                        </Form.Item>
                    </FormLayout>
                )}
                <FormLayout type="full">
                    <Form.Item label="附件">{file.length > 0 && <Previewer data={file[0]} />}</Form.Item>
                </FormLayout>
            </div>
        </div>
    );
}
